<template>
  <div style="5vh">
    <div id="title">消息</div>
    <van-pull-refresh
      v-model="pullOption.refreshing"
      @refresh="onRefresh()"
      :immediate-check="false"
    >
      <van-empty description="没有通知" v-if="pageData.record.length == 0" />

      <van-list
        v-model="pullOption.loading"
        :finished="pullOption.finished"
        finished-text=""
        @load="onLoad"
      >
        <van-cell v-for="item in pageData.record" :key="item.id" class="card">
          <van-row>
            <van-col span="4">
              <van-image
                round
                width="3rem"
                height="3rem"
                :src="item.sendUser.avatar"
              />
            </van-col>
            <van-col span="8" >
              <span class="send-username">{{ item.sendUser.nickname }}</span>
              <br /><span class="content">{{ item.content }}</span>
            </van-col>
            <van-col span="2" offset="10">
              <van-icon
                name="new-o"
                size="25"
                color="red"
                v-if="item.status == 0"
              />
            </van-col>
          </van-row>
          <van-row @click="toArticle(item.businessId)">
            <div class="reference">
              {{ item.receiveUsername }}：{{ item.reference }}
            </div>
          </van-row>
          <van-row style="margin-top: 0.5em">
            <van-col span="10">
              <span class="categoryName">#{{ item.categoryName }}</span>
            </van-col>
            <van-col span="10" offset="4">
              <span class="create-time">{{ item.createTime }}</span>
            </van-col>
          </van-row>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>

export default {
  name: "messagePage",
  data() {
    return {
      loginUser: {},
      pageData: {
        record: [],
      },
      searchForm: {
        current: 1,
        size: 5,
      },
      pullOption: {
        loading: false,
        finished: false,
        refreshing: false,
      },
    };
  },
  methods: {
    toArticle(id) {
      this.$router.push({
        path: "/home",
        query: {
          id: id,
        },
      });
    },
    onLoad() {
      this.pullOption.finished = false;
      this.pullOption.loading = true;
      this.listRequest(this.searchForm).then((res) => {
        if (res.data.data.record.length == 0) {
          this.pullOption.finished = true;
          this.pullOption.loading = false;
          return;
        }
        this.formatLoadData(res.data.data);
        this.pullOption.loading = false;
        this.searchForm.current++;
      });
    },
    formatLoadData(pageData) {
      this.pageData.current = pageData.current;
      this.pageData.size = pageData.size;
      this.pageData.total = pageData.total;
      this.pageData.record.push(...pageData.record);
    },
    onRefresh() {
      this.pullOption.finished = true;
      this.searchForm.current = 1;
      this.pullOption.refreshing = true;
      this.pageData.record.splice(0);
      this.listData().then(() => {
        this.pullOption.refreshing = false;
        this.searchForm.current++;
      });
    },
    listRequest(params) {
      return this.postRequest("/msg/list", params);
    },
    listData() {
      return this.listRequest(this.searchForm).then((res) => {
        this.pageData = res.data.data;
        if (this.pageData.record.length == 0) {
          this.pullOption.finished = true;
        } else {
          this.pullOption.finished = false;
        }
      });
    },
  },
};
</script>
<style scoped>
.send-username {
  font-weight: bold;
  font-size: 1.2em;
}
.content {
  color: #dcd6d9;
}
.reference {
  background-color: #dcdddd;
  padding: 1em;
  border-radius: 10px;
  font-size: 1.1em;
}
</style>
